<template>
  <div class="app-container">
    <div  id="printMe">
      <table class="layui-table">
        <tr>
          <td rowspan="3" class="number" style="text-align: center">
            <font class="number">{{formInfo.xlh}}</font>
          </td>
          <td colspan="5" style="font-weight: bold;text-align: center;font-size: 20px">皮卡SPS+PTL分拣单</td>
          <td rowspan="3">
            <!--<img src="img/dazhen.png" class="erweima"/>-->
            <div class="qrcode" style="width:80px;height: 80px;float: right;margin-top: 10px;margin-right:50px">
              <div ref="qrcode" style="margin:0 auto;" id="qrcode"></div>
            </div>
          </td>
        </tr>
        <tr style="border: 1px solid black;">
          <td>排产时间</td>
          <td>拣配仓库</td>
          <td>拣配区域</td>
          <td colspan="2">打印时间（次数）</td>
        </tr>
        <tr>
          <td style="font-weight: bold;font-size:15px">{{formInfo.pcDate}}</td>
          <td>内饰皮卡库</td>
          <td>{{formInfo.spsArea}}</td>
          <td colspan="2">{{currentDate}} ({{formInfo.sn}})</td>
        </tr>
        <tr>
          <td>订单号</td>
          <td colspan="2" style="font-weight: bold;font-size:15px">{{formInfo.orderCode}}</td>
          <td>车辆型号</td>
          <td style="font-weight: bold" colspan="3"></td>
        </tr>
        <tr>
          <td>分拣单号：</td>
          <td colspan="2" style="font-weight: bold;font-size:15px">{{formInfo.res1}}</td>
          <td>总行数：</td>
          <td style="font-weight: bold">{{rowCount}}</td>
          <td>器具编号</td>
          <td style="font-weight: bold">{{formInfo.spsArea}}</td>
        </tr>
      </table>
      

    <el-table  v-loading="loading" :data="tableList" size="small">
      <!-- 序号列 -->
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="物品编号" align="center" prop="itemCode" width="230px" />
      <el-table-column label="物料名称" align="center" prop="itemName" width="120px" :show-overflow-tooltip="true"/>
      <!--<el-table-column label="单车用量" align="center" prop="dcNum" width="80"/>-->
      <el-table-column label="分拣数量" align="center" prop="fjNum" width="80"/>
      <el-table-column label="单位" align="center" prop="unit" width="80"/>
      <el-table-column label="料车位" align="center" prop="applianceyCode"width="80"/>
      <el-table-column label="库位" align="center" prop="lableCode"width="80"/>
      <el-table-column label="段位" align="center" prop="res4" width="80"/>
    </el-table>

      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 35px">
          <el-button type="primary" v-print="printObj"  v-if="showDy" @click="getShow">打 印</el-button>
          <el-button @click="cancel" v-if="showDy">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { updateOrderDyStatus } from "@/api/business/ccorderinfo";
import print from "vue-print-nb";
import QRCode from 'qrcodejs2';
export default {
  directives: {
    print
  },
  components: {

  },
  props:{
    formObj: {
      type: Object,
    }
  },
  data() {
    return {
      currentDate:null,
      qrcode: null,
      qrcodeInstance: null, // 保存QRCode实例
      //序号
      fjSn:0,
      //行数
      rowCount:0,
      printObj: {
        id: "printMe",//必填项，需部分打印输入的ID
        popTitle: "皮卡SPS+PTL分拣单",//标题显示标题
        extraCss: "",//附加链接连接，以逗号分隔
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',//附加到head标签的附加标签，以逗号分隔
        url: "",
        standard: "",
        extraCss: "",
      },

      formInfo:{},
      formInfo2:{},
      tableList:[],
      showDy:true
    }
  },
 watch:{
   formObj: { // 对对象进行深度监听
     handler(nv) {
       this.cshDate();
       this.tableList = nv;
       this.formInfo =this.tableList[0];
       //行数
       this.rowCount = this.tableList.length;
       //序号
     //  this.fjSn  =this.tableList[0].res1.slice(8);

       this.showDy = true;
     },

     immediate: true,
     deep: true
   },

   // 当 formInfo.res1 改变时，重新生成二维码
   'formInfo.res1'(newValue, oldValue) {
     this.generateQRCode(); // 更新二维码
   }

 },
  created() {
    this.showDy = true;
  },
  mounted() {
    // 在 mounted 中调用 generateQRCode，确保 this.$refs.qrcode 已经绑定
    this.generateQRCode();
  },


  methods: {
    //生成二维码的方法
    generateQRCode(){
      // 如果二维码实例存在，则清除之前的二维码
      if (this.qrcodeInstance!=null) {
        this.$refs.qrcode.innerHTML = '';
      }
      // 生成新的二维码实例
      this.qrcodeInstance = new QRCode(this.$refs.qrcode, {
        width: 80,
        height: 80,
        text:this.formInfo.res1,
      });
    },


    //获取初始化打印是按
    cshDate(){
      // 获取当前时间
      var now = new Date();

// 格式化为指定格式（例如：YYYY-MM-DD HH:MM:SS）
      var formattedDateTime = now.getFullYear() + '-' +
        ('0' + (now.getMonth() + 1)).slice(-2) + '-' +
        ('0' + now.getDate()).slice(-2) + ' ' +
        ('0' + now.getHours()).slice(-2) + ':' +
        ('0' + now.getMinutes()).slice(-2) + ':' +
        ('0' + now.getSeconds()).slice(-2);

      console.log(formattedDateTime); // 输出格式化后的时间
      this.currentDate = formattedDateTime;

    },

    getShow() {
      this.showDy = false;
      //更新打印状态和打印次数
      setTimeout(() => {
        updateOrderDyStatus(this.formInfo).then(response => {
          this.showDy=true
          this.$emit('changeCancel',false)
        });
      }, 5);

    },




    getSummaries(param) {
   /*   const {
        columns,
        data
      } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          // 人民币金额（大写）陆拾伍万伍仟壹佰伍拾捌点肆元整
          return;
        }
        if (index === 6) { //指定哪一列合计（从0开始计数） 如果需要全部合计 去掉这个判断即可
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              console.log();
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "";
          }
        }
      });
      return sums;*/
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // setTimeout(() => {
      //   if (this.$refs.table.$el) {
      //     let current = this.$refs.table.$el
      //       .querySelector('.el-table__footer-wrapper')
      //       .querySelector('.el-table__footer')
      //     let cell = current.rows[0].cells
      //     //cell[1].style.display = 'none'
      //     cell[0].colSpan = '3'
      //   }
      // },500)

    },
    // 取消按钮
    cancel() {
      this.$emit('changeCancel', false);
    },

    /** 提交按钮 */
    submitForm() {
      this.formInfo.ccOrderIteminfoList=this.tableList
      updateHtinfo(this.formInfo).then(response => {
                  this.$modal.msgSuccess("修改成功");
                   this.showDy=true
                  // this.$emit('changeObj', false);
                });
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     if (this.form.id != null) {
      //       updateHtinfo(this.form).then(response => {
      //         this.$modal.msgSuccess("修改成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     } else {
      //       addHtinfo(this.form).then(response => {
      //         this.$modal.msgSuccess("新增成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     }
      //   }
      // });
    },


// 失去焦点初始化
    inputBlur(item) {
      // if (item.email == ""){
      //   this.$modal.msgWarning("邮箱不能为空");
      //   // this.getList();
      // }else {
      //   // 失去焦点 提交数据
      //   updateUser(item).then(response  => {
      //     this.$modal.msgSuccess("提交成功");
      //     this.getList();
      //   })
      // }
    },
  }
};
</script>
<style>
  @media print {

    .el-table .el-table__cell{
          font-size: 16px;
           width: 50px;
         }
   /* 为了清晰打印，可以隐藏不需要打印的元素*/
    .el-table__row--striped td {
      background-color: unset !important; /* 移除条纹背景色 */
    }
    .el-table th,
    .el-table td {
      border: solid 1px #000 !important; /* 设置单元格边框 */
      border-collapse: collapse !important; /* 边框合并 */
    }

  }
</style>
<style scoped lang="scss">
  @page {
    size: auto;
    margin: 8mm;
  }
  .mtb10{
    margin: 10px 0;
  }
  .mainInfo{
    .infoTitle{
      text-align: center;
      margin: 10px 0;
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
  .boxMain{
    display: flex;
    flex-direction: row;
    border: 1px solid #d9d9d9;
    .boxLeft,.boxCenter{
      flex: 1;
      border-right: 1px solid #d9d9d9;
      padding: 10px;
      ::v-deep .el-form-item__label{
        font-size: 13px;
        padding-right: 4px;
        font-weight: normal;
      }
      ::v-deep .el-form-item{
        margin-bottom: 10px;
      }
    }
    .boxRight{
      width: 200px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      .rightTop{
        flex: 1;
      }
    }
    .infoTitle2{
      text-align: center;
      margin: 10px 0;
    }

    .bold-text {
      font-weight: bold;
    }

/*    .el-table .warning-row {
      background: #f0f2f5;
    }

    .el-table .success-row {
      background: #00ff00;
    }*/
  }
</style>

<style scoped>
  .layui-table {
    width:210mm;
    /*background-color: #fff;*/
    /*color: #666;*/
    max-height: 297mm;
    margin: 0px auto;
  }
  .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
    /*background-color: #FAFAFA;*/
  }
  .layui-table tr {
    transition: all .3s;
    -webkit-transition: all .3s;
    height: 20px;
    line-height: 20px;
  }
  .layui-table td, .layui-table th {
    position: relative;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    padding: 6px 10px;
    border: 2px;
  }

  .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    border-width: 1px;
    border-style: solid;
   /* border-color: #eee;*/
  }
  .layui-table th {
    text-align: left;
    font-weight: 400;
  }

  @media print {
    /* 确保二维码可见 */
    .qrcode {
      display: block;
      visibility: visible;
    }

    /* 其他打印时需要的样式 */
    #qrcode {
      width: 200px; /* 确保二维码的大小适合打印 */
      height: 200px;
    }
  }
.top01{
  width: 100%;
  height:auto;
  float:left;
  height: 80px;


}
  .other span{
    float: right;
    margin: 0 20px;
  }
  .layui-table {
    width: 100%;
    background-color: #fff;
    color: #666;
  }

  .layui-table,
  .layui-table-view {
    margin: 10px 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .layui-table tbody tr:hover,
  .layui-table thead tr,
  .layui-table-click,
  .layui-table-header,
  .layui-table-hover,
  .layui-table-mend,
  .layui-table-patch,
  .layui-table-tool,
  .layui-table-total,
  .layui-table-total tr,
  .layui-table[lay-even] tr:nth-child(even) {
    background-color: #FAFAFA;
  }

  .layui-table tr {
    transition: all .3s;
    -webkit-transition: all .3s;
  }

  .layui-table td,
  .layui-table th {
    position: relative;
    padding: 5px 5px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
  }

  .layui-table td,
  .layui-table th,
  .layui-table-col-set,
  .layui-table-fixed-r,
  .layui-table-grid-down,
  .layui-table-header,
  .layui-table-page,
  .layui-table-tips-main,
  .layui-table-tool,
  .layui-table-total,
  .layui-table-view,
  .layui-table-line {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
  }

  .layui-table th {
    text-align: left;
    font-weight: 400;
  }

  .layui-table-line td,
  .layui-table-line th {
    border-width: 0 0 1px;
  }
  table tr td{
    text-align: left;
  }
  .number{
    font-weight: bold;
    color: #000;
    font-size: 50px;
  }
  .erweima{
    width: 80px;
    height: 80px;
  }



</style>

